<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大广灯饰</title>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="mycenter">

<!--顶部bar栏-->
<div class="topbar">
    <div>
        <div class="topbar-left">
            欢迎进入大广灯饰有限公司官网!
        </div>

        <div class="topbar-right">
            <img src="img/phone.png"/>
            <span>电话：18516048716</span>
            <img src="img/email.png"/>
            <span>邮箱：18516048716@163.com</span>
        </div>
    </div>
</div>

<!--导航栏-->
<div class="header">
    <a href="#" class="logo">
        <img src="img/logo.png" alt="大广灯饰" title="大广灯饰"/>
    </a>

    <ul class="nav">
        <li>
            <a class="nav-list" href="#" id="liveroom">客厅</a>
        </li>
        <li>
            <a class="nav-list" href="#" id="bedroom">卧室</a>
        </li>
        <li>
            <a class="nav-list" href="#" id="kitchen">厨房</a>
        </li>
        <li>
            <a class="nav-list" href="#" id="restaurant">餐厅</a>
        </li>
        <li>
            <a class="nav-list" href="#">浴室</a>
        </li>
        <li>
            <a class="nav-list" href="#">欧式</a>
        </li>
        <li>
            <a class="nav-list" href="#">中式</a>
        </li>
        <li>
            <a class="nav-list" href="#">美式</a>
        </li>
        <li>
            <a class="nav-list" href="#">现代</a>
        </li>
    </ul>


</div>

<!--广告轮播-->
<div class="banner">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="img/banner1.jpg"></div>
            <div><img src="img/banner2.jpg"></div>
            <div><img src="img/banner3.jpg"></div>
            <div><img src="img/banner4.jpg"></div>
        </div>
    </div>
</div>


<iframe src="html/LiveRoom.html" width="1200" height="100%" id="contentFrame"></iframe>


<!--底部-->
<div class="footer">
    <div class="footer-left">
        <img class="footer-left-logo" src="img/footer-logo.png"/>
        <div class="footer-left-message">
            <ul class="about">
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">微信公众号</a></li>
            </ul>

            <ul class="contact">
                <li>Copyright © 大广灯饰版权所有</li>
            </ul>
        </div>
    </div>

    <div class="footer-right">
        <p class="right-title">客服电话</p>
        <p class="right-tel">18516048716</p>
        <p class="right-time">周一至周日 9:00-22:00</p>
    </div>
</div>

<script src="layui/layui.js"></script>
<!--<script src="js/jquery-3.2.1.min.js"></script>-->
<script>
    layui.use('carousel', function () {
        let carousel = layui.carousel;
        let $ = layui.jquery;
        //建造实例
        carousel.render({
            elem: '#test1',
            width: '100%', //设置容器宽度
            height: 300,
            arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });

        $("#contentFrame").load(function () {
            var mainheight = $(this).contents().find("body").height() + 30;
            $(this).height(mainheight);
        });

        $('#bedroom').click(function () {
            $('#contentFrame').attr('src', 'html/BedRoom.html');
        });

        $('#liveroom').click(function () {
            $('#contentFrame').attr('src', 'html/LiveRoom.html');
        });

        $('#restaurant').click(function () {
            $('#contentFrame').attr('src', 'html/Restaurant.html');
        });

        $('#kitchen').click(function () {
            $('#contentFrame').attr('src', 'html/Kitchen.html');
        });
    });
</script>
</body>
</html>